<template>
    <div class="main_bottom">
        <div class="btImg_bg">最近24小时数据</div>
        <select class="ysSelect" v-model="selected" @change="loseFocus">
            <option disabled value="">请选择</option>
            <option v-for="option in options" :key="option.value" :value="option.value">
                {{ option.text }}
            </option>
        </select>
        <div id="chartLine"></div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            selected: '',
            options: [
                { text: '选项1', value: 'option1' },
                { text: '选项2', value: 'option2' },
                { text: '选项3', value: 'option3' }
            ]
        }
    },
    methods: {
        loseFocus() {
            this.$nextTick(() => {
                // 使用原生JavaScript方法失去焦点
                this.$el.querySelector('select').blur();
            });
        }
    },
    mounted() {
        this.selected = this.options[0].value; // 在组件挂载后设置默认值
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chartLine'));
        // 指定图表的配置项和数据axisLine.lineStyle.color
        var option = {
            grid: {
                top: "10%",
                left: "2%",
                right: "2%",
                bottom: "20%",
                containLabel: true // 包含刻度文字在内
            },
            tooltip: {
                trigger: "axis",
                backgroundColor: 'rgba(50,50,50,0.7)',
                borderColor: 'rgba(50,50,50,0)',
                textStyle: {
                    color: '#fff'
                },
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: "rgba(255, 255, 255, 0.85)"
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.4)"
                    }
                },
                data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: "rgba(255, 255, 255, 0.85)"
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255, 255, 255, 0.2)"
                    }
                },
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320, 901],
                    type: 'line',
                    smooth: true,
                    itemStyle: {
                        color: '#2179FC'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(36, 129, 247, 0.6)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(36, 129, 247, 0.1)'
                            }
                        ])
                    },
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        window.addEventListener("resize", () => myChart.resize());

    },
}

</script>

<style lang="less">
.main_bottom {
    height: 260px;
    background: #00319E80;
}

.btImg_bg {
    background: url('../assets/images/title.png') no-repeat center;
    width: 100%;
    height: 30px;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
}

#chartLine {
    width: 100%;
    height: 100%;
}

.ysSelect {
    position: absolute;
    bottom: 202px;
    right: 32px;
    color: #fff;
    width: 104px;
    height: 32px;
    background: rgba(22, 119, 255, 0.3);
    border-radius: 6px;
    border: 2px solid #3677FF;
}
</style>